* {
  margin: 0;
  padding: 0;
}

ul, ol, li {
  list-style: none;
}

a, a:active, a:hover, a:link {
  text-decoration: none;
  color: black;
}

input, button, select, textarea {
  outline: none;
}

img {
  width: 100%;
  height: 100%;
  display: block;
}

/* 头部内容样式 */
.header {
  width: 1200px;
  height: 60px;
  margin: 0 auto;
  position: relative;
  display: flex;
  margin-bottom: 20px;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: 500;
  color: orange;
  background-color: white;
  -webkit-animation: shadow-drop-2-lr 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: shadow-drop-2-lr 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes shadow-drop-2-lr {
  0% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-transform: translateZ(50px);
            transform: translateZ(50px);
    -webkit-box-shadow: -12px 0 20px -12px rgba(0, 0, 0, 0.35), 12px 0 20px -12px rgba(0, 0, 0, 0.35);
            box-shadow: -12px 0 20px -12px rgba(0, 0, 0, 0.35), 12px 0 20px -12px rgba(0, 0, 0, 0.35);
  }
}
@keyframes shadow-drop-2-lr {
  0% {
   -webkit-transform: translateZ(0);
           transform: translateZ(0);
   -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0);
           box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 0 rgba(0, 0, 0, 0);
 }
 100% {
   -webkit-transform: translateZ(50px);
           transform: translateZ(50px);
   -webkit-box-shadow: -12px 0 20px -12px rgba(0, 0, 0, 0.35), 12px 0 20px -12px rgba(0, 0, 0, 0.35);
           box-shadow: -12px 0 20px -12px rgba(0, 0, 0, 0.35), 12px 0 20px -12px rgba(0, 0, 0, 0.35);
 }
}

.header > a {
  display: block;
  position: absolute;
  left:30px;
}
.header > a > .logo {
  width: 40px;
  height: 40px;
}
.header > img {
  position: absolute;
  left:80px;
  height:30px;
  width: auto;
}
.header > .search-box {
  width: 25%;
  width: 250px;
  height: 40px;
  position: relative;
  align:center;
}
.search > .s {
  height: 38px;
  width: 198px;
  position: absolute;
  border:1px solid orange;
  border-top-left-radius:10px;
  border-bottom-left-radius:10px;
  background-color: white;
  padding-left: 10px;
}
.search > .submit{
  width: 50px;
  color: white;
  height: 40px;
  position: absolute;
  right:0;
  background-color: orange;
  border:0;
  border-top-right-radius:10px;
  border-bottom-right-radius:10px;
}

.header > p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 30px;
  font-size: 20px;
  display: none;
}
.header >p >a {
  margin-left: 30px;
}
.header >p >a:hover {
  color:orange;
}
.header >p >.logout{
  color:black;
  margin-left: 20px;
  border-style: none;
  font-size: 20px;
  background-color: white;
}
.header >p >.logout:hover{
  color:orange;
}

.header > p.active {
  display: block;
}
